<template>
  <view class="order-list page-box">
    <view class="order-list-tabs">
      <u-tabs
        :list="typeList"
        :activeStyle="{ color: '#C94117' }"
        lineWidth="0"
        :scrollable="false"
        :current="currentIndx"
        @change="changeTabItem"
      ></u-tabs>
    </view>

    <load-list :localData="currentOrderData">
      <template v-slot="{ list }">
        <view
          class="order-list-item flex justify-between items-center"
          v-for="item of list"
          :key="item._id"
        >
          <view class="item-avatar" v-if="item.data.project_log">
            <u-avatar size="80rpx" :src="$photo(item.data.project_log)" />
          </view>
          <view class="item-info">
            <view class="chuck flex items-center justify-between">
              <view style="color: #333; font-size: 32rpx">{{
                item.data.title
              }}</view>
              <view style="color: #f60000; font-size: 28rpx">
                ¥ {{ Number(item.data.price) + item.distance * 10 }}
              </view>
            </view>
            <view class="chuck flex items-center justify-between">
              <view>打车费：¥ {{ item.distance * 10 }}</view>
              <view>项目费：¥ {{ item.data.price }}</view>
            </view>
            <view class="chuck">
              {{ $u.timeFormat(item.creatorTime, "yyyy-mm-dd hh:MM:ss") }}
            </view>
            <view class="chuck flex items-center justify-end">
              <view v-if="item.is_orders" class="button-base cancel">
                已接单
              </view>
              <view v-else class="button-base" @click="handleOrder(item)">
                查看
              </view>
            </view>
          </view>
        </view>
      </template>
    </load-list>
  </view>
</template>

<script>
import { getModelList, getModelInfo } from "@/api";
import { getSearchFilter } from "@/common/function";
export default {
  data() {
    return {
      typeList: [
        {
          name: "待接单",
          value: 2,
        },
        {
          name: "服务中",
          value: 3,
        },
        {
          name: "已完成",
          value: 4,
        },
      ],
      serverId: "", //技师基础信息id
      currentIndx: 0, //当前tab下表
      currentOrderData: [], //tab切换时显示的订单数据
      newAllOrderData: [], //请求所有当前技师订单数据
      technicianItem: {}, // 当前技师列表数据
    };
  },
  computed: {},
  methods: {
    // tab切换
    async changeTabItem(e) {
      this.currentIndx = e.index;
      this.currentOrderData = this.newAllOrderData.filter(
        (item) => item.status_code === e.value
      );
    },
    // 获取项目信息
    async getProjectData(id) {
      const { data, code } = await getModelInfo("65b1d17c0921260197c48a76", id);
      if (code === 200) return data;
    },
    // 获取数据
    async getOrderListData(baseInfo_id) {
      let filterData = {
        currentPage: 1,
        pageSize: -1,
        connect: "and",
        filter: [getSearchFilter({ baseInfo_id }, { method: "eq" })].flat(2),
      };
      let allOrderData = [];
      const { data } = await getModelList(
        "66002f4f5efd5153ff566ec3",
        filterData
      );
      for (const order of data?.list) {
        let orderData = await this.getProjectData(order.current_project_Info);
        allOrderData.push({
          ...order,
          data: orderData,
        });
      }
      this.newAllOrderData = allOrderData;
      this.currentOrderData = allOrderData.filter(
        (item) => item.status_code === 2
      );
    },
    // 接单或者取消接单
    async handleOrder(item) {
      if (this.technicianItem.technician_status !== 1) {
        this.$message("技师正在服务中", "none");
        return;
      }
      this.$jump("/subPages/user/technician/order/order-detail", {
        query: { orderId: item._id },
      });
    },
    // 获取技师当前状态
    async getTechnicianStatus(technician_Info) {
      let filter = {
        currentPage: 1,
        pageSize: -1,
        connect: "and",
        filter: [getSearchFilter({ technician_Info }, { method: "eq" })].flat(
          2
        ),
      };
      const { data, code } = await getModelList(
        "65fbe6475efd5153ff566a8b",
        filter
      );
      if (code === 200) this.technicianItem = data?.list?.[0];
    },
  },
  onShow() {
    this.getOrderListData(this.serverId);
    this.getTechnicianStatus(this.serverId);
  },
  onLoad({ technician_Id }) {
    this.serverId = technician_Id;
  },
};
</script>

<style lang="scss" scoped>
.order-list {
  &-item {
    box-shadow: 0rpx 6rpx 18rpx 1rpx rgba(209, 209, 209, 0.4);
    border-radius: 15rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;

    .item-avatar {
      flex-shrink: 0;
    }

    .item-info {
      flex: 1;
      margin-left: 20rpx;

      .chuck {
        margin-bottom: 10rpx;
        color: #999;

        .button-base {
          min-width: 140rpx;
          height: 52rpx;
          color: #fff;
          background: #c94117;
          border-radius: 35rpx;
          text-align: center;
          line-height: 52rpx;
          margin-left: 20rpx;
        }

        .cancel {
          background-color: #f5f5f5;
          color: #333;
        }
      }
    }
  }
}
</style>
